<template>
  <div id="singer">
    <!-- 筛选标签展示 -->
    <div class="filtrate">
      <div
        class="filtrate-list"
        v-for="(item, key) in fakeData"
        :key="key"
      >
        <span class="tag-name font-16 mright-10">
          {{ tagTitle(key) + ':' }}
        </span>
        <a-radio-group
            @change="event => change(key, event)" default-value="全部">
          <a-radio-button
            v-for="tag in item"
            :value="tag.value"
            :key="tag.id"
          >
            {{ tag.value }}
          </a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <!-- 歌手列表展示 -->
    <div class="singer-list">
      <ContentCard :dataList="data" @goDetail="goDetail" />
      <div class="observed">被发现了</div>
      <!-- 歌手列表没加载完显示 -->
      <div class="loading" v-if="more">
        <a-icon slot="indicator" type="loading" style="font-size: 28px"/>
        <span class="mleft-10">努力加载中...</span>
      </div>
      <!-- 歌手列表加载完后 -->
      <div class="no-loading" v-else>
        <span>已经到底了~</span>
      </div>
    </div>
  </div>
</template>

<script>
import { artistList } from '@/api';
import { Radio } from 'ant-design-vue';
import ContentCard from '@/components/Content/ContentCard';
const fakeData = require('@/assets/json/fakeData.json');

export default {
  name: 'Singer',

  components: {
    ARadioGroup: Radio.Group,
    ARadioButton: Radio.Button,
    ContentCard
  },

  data() {
    return {
      data: [],
      loading: false,
      // 是否还可以滚动加载数据
      more: true,
      // 是否是点击tag进行筛选
      isClick: false,
      // 参数列表
      params: {
        type: -1,
        area: -1,
        initial: -1,
        offset: 0,
        limit: 30
      },
      fakeData
    };
  },

  // watch: {
  //   params: {
  //     handler() {
  //       // 监听到参数列表变化就调用一次
  //       // this.getArtistList();
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // },

  mounted() {
    // 被监听的对象
    const spin = document.querySelector('.observed');
    // 需要从0开始，不然获取到的是第二组数据
    let num = -1;
    const callback = entries => {
      const E = entries[0];
      // 说明已经加载完所有歌手
      if (!this.more) {
        this.loading = false;
        // 停止所有的监听
        intersectionObserver.disconnect();
        return;
      }
      if (E.isIntersecting) {
        num++;
        this.loading = true;
        this.$set(this.params, 'offset', num * this.params.limit);
        this.getArtistList();
      }
    }
    const options = {
      root: null,
      rootMargin: '0px 0px 0px 0px',
      threshold: [0],
      trackVisibility: true,
      delay: 100
    }
    const intersectionObserver = new IntersectionObserver(callback, options);
    intersectionObserver.observe(spin);
  },

  methods: {
    async getArtistList() {
      await artistList(this.params).then(res => {
        // 如果返回的more为false,则不需要再调用接口push数据
        if (!res.data.more) {
          this.more = res.data.more;
          return;
        }
        if (this.isClick) {
          this.data = res.data.artists;
          // 每次点击后把标识重置为false
          this.isClick = false;
          return;
        }
        this.data.push(...res.data.artists);
      });
    },
    // 转中文标题
    tagTitle(key) {
      switch (key) {
        case 'area':
          return '语种';
        case 'type':
          return '分类';
        default:
          return '筛选';
      }
    },
    change(key, event) {
      const current = event.target.value,
        param = this.fakeData[key].find(fake => fake.value === current).id;
      // 改变parmas对应参数
      this.$set(this.params, key, param);
      this.$set(this.params, 'offset', 0);
      this.getArtistList();
      this.isClick = true;
    },
    // 跳转歌手详情页
    goDetail(id) {
      this.$router.push({
        name: 'artistdetail',
        query: { id }
      })
    }
  }
};
</script>

<style lang="less" scoped>
// @import '../../styles/common.css';
#singer {
  position: relative;
  .filtrate-list {
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    margin-top: 10px;
    .tag-name {
      width: 60px;
      color: rgba(0, 0, 0, 0.65);
    }
    /deep/.ant-radio-group {
      width: 80%;
    }
    /deep/.ant-radio-button-wrapper {
      border: none;
      margin-right: 20px;
      &:hover {
        color: #ec4141;
      }
      &::before {
        width: 0;
        background-color: transparent;
      }
    }
    /deep/label.ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
      color: #ec4141;
      border-radius: 25px;
      box-shadow: 0 0 0 0px transparent;
      background-color: #fdf5f5 !important;
    }
  }
  .singer-list {
    .observed {
      visibility: hidden;
    }
    .loading,
    .no-loading {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>